<template>
  <el-row>
    <el-col :span="24">
      <!-- <basic-container> -->
      <avue-crud ref="crud" v-model="form" :option="option" :table-loading="loading" :data="data"
        :permission="permissionList" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
        @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
        @refresh-change="refreshChange" @on-load="onLoad">
        <template slot="orderSendStatus" slot-scope="scope">
          <div v-if="scope.row.orderType == 1">
            <el-tag v-if="scope.row.orderSendStatus == 1" type="success">未核销</el-tag>
            <el-tag v-else-if="scope.row.orderSendStatus == 2" type="info">已核销</el-tag>
          </div>
          <div v-else-if="scope.row.orderType == 2 || scope.row.orderType == 4">
            <el-tag v-if="scope.row.orderSendStatus == 1" type="success">待发货</el-tag>
            <el-tag v-else-if="scope.row.orderSendStatus == 2" type="info">已发货</el-tag>
            <el-tag v-else-if="scope.row.orderSendStatus == 3">已收货</el-tag>
          </div>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row)">详情
          </el-button>
          <el-button
            v-if="((scope.row.orderType == 2 || scope.row.orderType == 4) && ([1, 2].includes(scope.row.orderSendStatus)))"
            type="text" style="color: #67c23a;" size="small" @click="handleRole(scope.row)">
            {{ (scope.row.orderType == 2 || scope.row.orderType == 4) &&
              scope.row.orderSendStatus
              == 2 ? '修改物流单号' : '发货' }}
          </el-button>
        </template>
      </avue-crud>
      <el-dialog title="订单详情" center append-to-body :visible.sync="box" top="72px" width="500px">
        <div class="detail-box">
          <!-- 地址 -->
          <div>
            <div class="fs-14 mb-10">快递地址</div>
            <el-row>
              <el-col :span="18">
                <div class="fs-14 mb-6">{{ detailMsg.address }}</div>
                <div class="desc fs-10">{{ detailMsg.phone }} {{ detailMsg.linkMan }}</div>
              </el-col>
              <el-col :span="6">
                <!-- <span class="copy">复制地址</span> -->
                <el-button class="fr" type="info" size="small" @click="copy(detailMsg.address)">复制地址</el-button>
              </el-col>
            </el-row>
          </div>
          <!-- 清单 -->
          <div class="fs-14 mt-38 ">
            <div class="mb-20">商品清单</div>
            <div v-for="item in detailMsg.goodsDetailList" :key="item.goodsId" class="flex mb-10">
              <img class="w-70 h-70 mr-10" :src="item.thumbnailImage" alt="">
              <div class="w-240 flex flex-col flex-between">
                <div>{{ item.goodsName }}</div>
                <div>数量 {{ item.buyNum }}</div>
              </div>
              <div class="price item-price tc">
                <div>￥{{ item.buyPrice }}</div>
                <div class="old-price">￥{{ item.guidePrice }}</div>
              </div>
            </div>
            <el-row class="mt-20">
              <el-col :span="6">
                商品合计价格
              </el-col>
              <el-col :span="18" class="tr">
                <span class="price">￥{{ detailMsg.buyTotalPrice }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <span v-if="isShowGoodsBtn" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openshowConfirm">{{ (detailMsg.orderType == 2 || detailMsg.orderType == 4) &&
            detailMsg.orderSendStatus
            == 2 ? '修改物流单号' : '确认发货' }}</el-button>
        </span>
      </el-dialog>
      <el-dialog title="发货确定" :visible.sync="showConfirm" top="72px" width="500px">
        <el-form ref="form" :rules="rules" :model="ruleForm" label-width="120px">
          <el-form-item label="物流单号" prop="logisticsCode">
            <el-input v-model="ruleForm.logisticsCode" placeholder="请填写物流单号" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="submit">确定</el-button>
        </span>
      </el-dialog>
      <!-- </basic-container> -->
    </el-col>
  </el-row>
</template>

<script>
import { getOrderList, getOrderGoodsDetails, updateOrderGoodsSendStatus } from '@/api/mallManage'

export default {
  data() {
    return {
      form: {},
      box: false,
      showConfirm: false,
      props: {
        label: 'menuName',
        value: 'id'
      },
      menuGrantList: [],
      menuTreeObj: [],
      selectionList: [],
      expandedKeys: [],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        rowKey: 'roleId',
        emptyBtnText: '重置',
        columnBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        cellBtn: false,
        tree: true,
        border: false,
        index: false,
        selection: false,
        viewBtn: false,
        dialogWidth: 500,
        dialogClickModal: false,
        menuWidth: 130,
        align: 'center',
        column: [
          {
            label: '商品名称',
            prop: 'goodsName',
            search: true,
            span: 24,
            labelWidth: 0,
            width: 1
          },
          {
            label: '订单编号',
            prop: 'orderCode',
            search: false,
            span: 24,
            labelWidth: 120
          },
          {
            label: '订单总价',
            prop: 'buyTotalPrice',
            search: false,
            span: 24,
            labelWidth: 100,
            width: 100
          },
          {
            label: '商品数量',
            prop: 'goodsNum',
            search: false,
            span: 24,
            width: 100
          },
          {
            label: '发货地址',
            prop: 'address',
            search: false,
            span: 24,
            labelWidth: 100
          },
          {
            label: '收件人',
            prop: 'linkMan',
            search: true,
            span: 24,
            labelWidth: 100
          },
          {
            label: '手机号',
            prop: 'phone',
            search: true,
            span: 24,
            labelWidth: 100,
            width: 100
          },
          {
            label: '状态',
            prop: 'orderSendStatus',
            search: false,
            span: 24,
            labelWidth: 100,
            width: 100
          },
          {
            label: '订单创建时间',
            prop: 'createTime',
            search: false,
            span: 24,
            labelWidth: 100,
            width: 140
          },
          {
            label: '运单号',
            prop: 'logisticsCode',
            search: false,
            span: 24,
            labelWidth: 100
          }
        ]
      },
      data: [],
      selectRoleId: '',
      detailMsg: {},
      isShowGoodsBtn: false, // 确认发货按钮
      rules: {
        logisticsCode: [
          { required: true, message: '请填写物流单号', trigger: 'blur' }
        ]
      },
      ruleForm: {
        logisticsCode: ''
      },
      btnLoading: false
    }
  },
  computed: {
    permissionList() {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      }
    },
    ids() {
      const ids = []
      this.selectionList.forEach((ele) => {
        ids.push(ele.roleId)
      })
      return ids
    }
  },
  watch: {},
  mounted() {
    // this.initData();
  },
  methods: {
    openshowConfirm() {
      if (this.detailMsg.orderType === 2 && this.detailMsg.orderSendStatus === 2) {
        this.ruleForm.logisticsCode = this.detailMsg.logisticsCode
      } else {
        this.ruleForm.logisticsCode = ''
      }
      this.showConfirm = true
    },
    closeDialog() {
      this.showConfirm = false
    },
    async handleDetail(row) {
      this.isShowGoodsBtn = false
      const result = await getOrderGoodsDetails({
        'logisticsCode': row.logisticsCode,
        'orderCode': row.orderCode
      })
      if (result.code === 200) {
        this.detailMsg = result.data
        this.box = true
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.btnLoading = true
          updateOrderGoodsSendStatus({
            logisticsCode: this.ruleForm.logisticsCode,
            orderCode: this.detailMsg.orderCode
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功')
              this.btnLoading = false
              setTimeout(() => {
                this.box = false
                this.showConfirm = false
                this.searchReset()
              })
            }
          }).catch(() => {
            this.btnLoading = false
          })
        }
      })
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    selectionChange(list) {
      this.selectionList = list
    },
    selectionClear() {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },

    async handleRole(row) {
      await this.handleDetail(row)
      this.isShowGoodsBtn = true
    },
    copy(content) {
      // 创建输入框元素
      const input = document.createElement('input')// 不会保留文本格式
      // 如果要保留文本格式，比如保留换行符，或者多行文本，可以使用  textarea 标签，再配和模板字符串 ` `
      // const input = document.createElement('textarea')
      // 将想要复制的值
      input.value = content
      // 页面底部追加输入框
      document.body.appendChild(input)
      // 选中输入框
      input.select()
      // 执行浏览器复制命令
      document.execCommand('Copy')
      // 弹出复制成功信息
      // this.$message.success('复制成功');
      // 复制后移除输入框
      input.remove()
      this.$message.success('复制成功')
    },

    // handleDelete() {
    //   if (this.selectionList.length === 0) {
    //     this.$message.warning('请选择至少一条数据')
    //     return
    //   }
    //   this.$confirm('确定将选择数据删除?', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       return remove(this.ids)
    //     })
    //     .then(() => {
    //       this.onLoad(this.page)
    //       this.$message({
    //         type: 'success',
    //         message: '操作成功!'
    //       })
    //       this.$refs.crud.toggleSelection()
    //     })
    // },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true
      getOrderList({
        current: page.currentPage,
        size: page.pageSize,
        ...Object.assign(params, this.query)
      }).then((res) => {
        const data = res.data
        this.data = data.records
        this.page.total = data.total
        this.loading = false
        this.selectionClear()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menuGrantList {
  max-height: 380px;
  overflow: auto;
}

.detail-box {
  color: #3e3e3e;
}

.desc {
  color: #666;
}

.copy {
  display: inline-block;
  padding: 4px 8px;
  background-color: #eee;
  cursor: pointer;
  border-radius: 4px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-between {
  justify-content: space-between;
}

.item-price {
  margin-left: auto;
}

.price {
  color: #CF2222;
}

.old-price {
  text-decoration: line-through;
  color: #A1A1A1;
  font-size: 10px;
}
</style>
